<template>
  <div class="doctor">
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd">
          <input
            class="weui-input"
            type="text"
            maxlength="10"
            placeholder="医生姓名"
            v-model="doctor.dc_name">
        </div>
      </div>
    </div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">头像</p>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" v-if="src || doctor.dc_pic">
                <li class="weui-uploader__file">
                  <img :src="src || 'http://static.qy-clinic.com/' + doctor.dc_pic" class="weui-uploader__img"/>
                </li>
              </ul>
              <div class="weui-uploader__input-box">
                <input @change="uploadFile" class="weui-uploader__input" type="file" accept="image/*">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="weui-cells__title">坐诊时间</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell weui-cell_select">
        <div class="weui-cell__bd">
          <select class="weui-select" v-model="doctor.working_week">
            <option selected value="">请选择</option>
            <option :value="index" v-for="(value, index) in weeks">{{value}}</option>
          </select>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">开始时间</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input"
            type="number"
            readonly=""
            placeholder="请输入开始小时"
            @click="selectHour('start_hour')"
            :value="doctor.start_hour">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">结束时间</label></div>
        <div class="weui-cell__bd">
          <input
            class="weui-input"
            type="number"
            readonly=""
            placeholder="请输入结束小时"
            @click="selectHour('end_hour')"
            :value="doctor.end_hour">
        </div>
      </div>
    </div>
    <div class="weui-cells__title">个人简介</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea
            class="weui-textarea"
            placeholder="医生的基本介绍"
            rows="5"
            v-model="doctor.dc_intro"
            maxlength="255"></textarea>
        </div>
      </div>
    </div>
    <div class="weui-cells__title">擅长治疗</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea
            class="weui-textarea"
            placeholder="医生擅长治疗"
            rows="5"
            v-model="doctor.dc_skill"
            maxlength="255"></textarea>
        </div>
      </div>
    </div>
    <div class="weui-btn-area">
      <a
        :class="'weui-btn weui-btn_primary' + (disabled ? ' weui-btn_loading' : '')"
        href="javascript:"
        v-if="!doctor.dc_id" @click="handleAdd">
        <i class="weui-loading" v-if="disabled"></i>保存
      </a>
      <a
        :class="'weui-btn weui-btn_primary' + (disabled ? ' weui-btn_loading' : '')"
        href="javascript:"
        v-if="doctor.dc_id"
        @click="handleUpdate">
        <i class="weui-loading" v-if="disabled"></i>更新</a>
      <a
        class="weui-btn weui-btn_warn"
        href="javascript:"
        v-if="doctor.dc_id"
        @click="handleRemove">删除</a>
      <router-link :to="{name: 'home'}" class="weui-btn weui-btn_default">返回</router-link>
    </div>
    <input type="hidden" id="dc_name"  emptyTips="请填写医生姓名">
    <input type="hidden" id="dc_pic"  emptyTips="请上传医生照片">
    <input type="hidden" id="working_week"  emptyTips="请选择坐诊周">
    <input type="hidden" id="start_hour"  emptyTips="请选择坐诊开始时间">
    <input type="hidden" id="end_hour"  emptyTips="请选择坐诊结束时间">
    <input type="hidden" id="dc_intro"  emptyTips="请填写基本介绍">
    <input type="hidden" id="dc_skill"  emptyTips="请填写擅长治疗">
  </div>
</template>

<script>
  import {
    getWorkingHourslist,
    getWorkingWeeks
  } from '../util';

  export default {
    name: 'Doctor',

    props: {
      doctor: {
        type: Object,
        default() {
          return {};
        }
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        doctorId: null,
        title: '新增医生',
        src: null,
        weeks: []
      };
    },

    methods: {
      handleAdd() {
        this.$emit('add', this.doctor);
      },
      handleUpdate() {
        this.$emit('update', this.doctor);
      },
      handleRemove() {
        this.$emit('remove', this.doctor.dc_id);
      },
      selectHour(key = '') {
        let defaultValue = new Date().getHours();

        if (defaultValue > 16) {
          defaultValue = 16
        } else if (defaultValue < 8) {
          defaultValue = 8;
        }

        this.$weui.picker(getWorkingHourslist(), {
          defaultValue: [defaultValue],
          onConfirm: (res) => {
            this.$set(this.doctor, [key], res[0].value);
          }
        });
      },
      uploadFile(e) {
        const file = e.target.files[0];
        const data = new FormData();
        const reader = new FileReader();
        const loading = this.$weui.loading();

        reader.readAsDataURL(file);
        reader.onload = (e) => {
          this.src = e.target.result;
        }
        data.append('file', file);
        this.$axios
          .post('http://api.qy-clinic.com/upload', data)
          .then(res => {
            this.doctor.dc_pic = res.data.savePath;
            loading.hide();
          })
          .catch(err => {
            this.$weui.alert(err.message);
            loading.hide();
          });
      }
    },

    mounted() {
      if (this.doctor.dc_id) {
        this.title = '编辑医生信息'
      }
      this.weeks = getWorkingWeeks();
    }
  }
</script>

<style lang="scss" scoped>
.weui-uploader__img {
  width: 100%;
  height: 100%;
}
</style>
